<template>
  <div class="w-full">
    <el-row>
      <el-col>
        <!-- 用户查询数量趋势(折线图) -->
        <user-check-query></user-check-query>
      </el-col>
    </el-row>
    <el-row :gutter="20" :justify="'center'" class="my-[10px]" >
      <el-col :span="11" >
        <!-- 24小时攻击类型分布（越狱，提示泄露，目标劫持）（饼图） -->
        <attack-type-distribution></attack-type-distribution>
      </el-col>
      <el-col :span="11">
        <!-- 24小时攻击IP TOP10（柱状图） -->
        <attack-IP></attack-IP>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <!-- 实时日志展示（time\trige） -->
        <real-time-log-display></real-time-log-display>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import UserCheckQuery from "./userCheckQuery";
import AttackIP from "./attackIP";
import AttackTypeDistribution from "./attackTypeDistribution";
import RealTimeLogDisplay from "./realTimeLogDisplay";
</script>
